<template>
  <div class="contain">
    <AeraSlot title="电影">
      <!-- 使用作用域插槽必须包裹在template标签里面 通过scope属性获取从组件传来的数据-->
      <template scope="aiguigu">
        <ul>
          <li  v-for="(item,index) in aiguigu.films" :key="index">{{item}}</li>
        </ul>
      </template>
    </AeraSlot>

    <AeraSlot title="电影">
     <template scope="aiguigu">
        <ol>
          <li  v-for="(item,index) in aiguigu.films" :key="index">{{item}}</li>
        </ol>
      </template>
    </AeraSlot>

    <AeraSlot title="电影">
     <template scope="aiguigu">
          <h4  v-for="(item,index) in aiguigu.films" :key="index">{{item}}</h4>
      </template>
    </AeraSlot>
  </div>
</template>

<script>
import AeraSlot from './components/AeraSlot.vue'

export default {
  name: 'App',
  components:{AeraSlot},

}
</script>

<style>
  .contain{
      /* background-color: palegreen; */
      display: flex;
      justify-content:space-around;
      text-align: center;
  }
  img{
    width:100%;
  }
  
</style>
